<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作： 元素以及元素内容的部分
		    .html()         无参-----功能:获取匹配元素中第一个元素的内容
			                 有参-----功能：【设置】将匹配元素集合中所有元素替换为新元素
			特点：针对  内容+元素
							 
			.val()			 无参-----功能：表单内的元素：input、select生效
			                               获取表单元素中第一个元素的内容
				             有参-----功能：【设置】表单内的元素：input、select生效
			 				         input元素直接显示  value
			                        select元素不直接显示value
									option 元素中内容：用户显示
									option 元素中value值，
									必须当前select中，option元素value值
									如果直接赋值，打印select元素对象名称[object Object]
									
			特点： 	针对(表单内form元素可以包裹)元素的内容						  
			.text()           无参---功能：获取匹配元素集合中所有的元素的文本内容
			                  有参---功能：【设置】匹配元素集合中所有的元素的文本内容
							               内容替换
			特点：元素中存在内容							   
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮 针对html()的函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		
		<h1>val()函数使用</h1>
		<button>按钮 针对val()的函数-无参</button>
		<input type="text" value="文本框真实的数据" />
		<input type="text" placeholder="输入框显示效果[提示]" />
		<!-- 按钮 |下拉列表:select>option*3 需要加value -->
		<!-- jq: 点击按钮，设置下拉列表的值  |  html()与val()有参是否发存在区别  -->
		<button>按钮 针对val()的函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		
		<h1>text()函数的使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		<script>
			//js变量【var i=1】==jq变量        var 变量名=值、元素 
			//无参数  htnl()  函数使用
			//var html=$("span").html();
			//BOM方式，打印数据
			//alert("无参数获取第一个元素内容："html);
			/*$("button").click(function(){
				var ops=$("select").val("op1");
				alert("var()函数-无参："+ops);
			});*/
			
			// 有参： 点击按钮---下面两个span  改成lorem  lorem
			/*$("button").click(function(){
				$("span").html("<span>lorem</span>");
			});*/
			
			//动态效果：点击按钮，获取第一个表单元素内容，元素打印出来
			//$("button").click(function(){
				/*注意：js变量名不可以为关键字！   in是关键字  */
			//	var ins=$("input").val();
			//	alert("val()函数无参："+ins);
			// });
			
			/*$("button").click(function(){
				//抓下拉列表的value值---------select()
				//设置元素第一个的值  1.直接设置下列表中的value的值
				var rem=$("select").val("rem1");
				//设置元素第一个值   2.给第一个值添加，设置的内容【本身存在】
				var rem=$("select").val();
				
				//[object Object] JavaScript 中 对象的默认字符串表示形态
				//select元素  对象输出[object Object]
				//value值： 真实数据  option中值：显示数据
				// 输出object Object   测试：val() 无参
				alert("val()的函数-有参"+rem);
			});*/
			
			//1.找到 类名为btn1的按钮--------点击---弹窗内容为：三个p元素的内容【无参】
			$(".btn1").click(function(){
				var ptext=$("p").text();
				alert(ptext);
			});
			//2.找到 类名为btn2的按钮--------点击---lorem4/5/6 改成“修改文本”【有参】
			$(".btn2").click(function(){
				$("p").text("修改文本");
			});
			
			
		</script>
	</body>
</html>